{% extends "template/layout.html" %} {% block content %}
<style>
  .admin_default {
    margin: 20px;
  }

  .layui-body {
    overflow-y: scroll;
  }

  .addBtn {
    float: right;
  }

  .addFrom {
    margin: 20px 20px 20px 5px;
  }

  .formBtn {
    margin-left: 150px;
    margin-top: 50px;
  }

  .idItem {
    display: none;
  }

  .noticeAdd {
    width: 230px;
    height: 30px;
  }

  .addForm {
    margin-top: 30px;
    width: 650px;
    margin: auto;
  }

  #demo1 {
    width: 200px;
    height: 200px;
  }

  .notcieImg {
    display: none;
  }

  .noticeText {
    display: none;

  }
</style>

<div class="panel admin_default">
  <div class="demoTable">
    <div class="layui-inline  noticeAdd">
    </div>
    <button class="layui-btn  addBtn">返回</button>

  </div>
  <div class="addForm">
    <form class="layui-form" action="" lay-filter="detailform">
      <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
          <input type="text" name="title" required lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">公告类型</label>
        <div class="layui-input-block">
          <select name="noticeType" lay-filter="type" id="addChage" required lay-verify="required">
            <option value=""></option>
            <option value="图">图</option>
            <option value="文字">文字</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item layui-form-text notcieImg">
        <label class="layui-form-label">图</label>
        <div class="layui-input-block">
          <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">上传图片</button>
            <div class="layui-upload-list">
              <img class="layui-upload-img" id="demo1">
              <p id="demoText"></p>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item layui-form-text   noticeText">
        <label class="layui-form-label">公告内容</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" class="layui-textarea" name="content"></textarea>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit="" lay-filter="edit">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>


</div>


{% endblock %} {% block footer %}

<script>
  var detailformData = {};
  detailformData.title = `{{detail.title}}`;
  detailformData.id = `{{detail.id}}`;
  detailformData.content = `{{detail.content}}`;
  detailformData.img = `{{detail.img}}`;
  detailformData.noticeType = `{{detail.noticeType}}`;
  layui.use(['form', 'table', 'laydate', 'upload'], function () {
    var table = layui.table;
    var form = layui.form;
    var upload = layui.upload;

    var imgurl = detailformData.img;
    //返回事件
    $(".addBtn").click(function () {
      window.location.href = "/notice"
    })
    //填充表格
    form.val('detailform', detailformData);
    //普通图片上传
    var uploadInst = upload.render({
      elem: '#test1',
      url: '/api/upload',
      before: function (obj) {
        //预读本地文件示例，不支持ie8
        obj.preview(function (index, file, result) {
          $('#demo1').attr('src', result); //图片链接（base64）
        });
      },
      done: function (res) {
        //如果上传失败
        if (res.status != 200) {
          return layer.msg('上传失败');
        }
        imgurl = res.imgUrl;
        //上传成功

      },
      error: function () {
        return layer.msg('上传失败');
      }
    });

    //判断显示
    function judgeShow() {

      if (detailformData.noticeType === '图') {
        $('.notcieImg').show();
        $('#demo1').attr('src', detailformData.img); 
      }
      if (detailformData.noticeType === '文字') {
        $('.noticeText').show();
      }
    }
    judgeShow();

    form.on('select(type)', function (data) {
      var selectVal = data.value;

      if (selectVal === '图') {
        $('.notcieImg').show();
        $('.noticeText').hide();
      }
      if (selectVal === '文字') {
        $('.notcieImg').hide();
        $('.noticeText').show();
      }
    });

    //监听提交
    form.on('submit(edit)', function (data) {
      var formData = data.field;
      formData.imgurl = imgurl;
      formData.id =detailformData.id;
      $.post('/notice/edit', formData, function (res) {
        if (res.status != 200) {
          layer.open({
            title: '警告',
            content: res.msg,
            icon: 2,
            skin: 'layer-ext-moon'
          });
          return;
        }
        window.location.href = '/notice';
      })
      return false;
    });

  });
</script>
{% endblock %}